<template>
  <div class="login-container" >
    <el-card class="box-card">
      <div class="login-body">
        <div class="login-title" @click="toIndex" >二手物品交易平台</div>
        <el-form ref="form" :model="userForm">
          <el-input placeholder="请输入账号..." v-model="userForm.accountNumber" class="login-input">
            <template slot="prepend">
              <div class="el-icon-user-solid"></div>
            </template>
          </el-input>
          <el-input placeholder="请输入密码..." v-model="userForm.userPassword" class="login-input"
                    @keyup.enter.native="login"  show-password>
            <template slot="prepend">
              <div class="el-icon-lock"></div>
            </template>
          </el-input>
          <div class="login-submit" >
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="warning" autocomplete="off" @click="$router.push('/sign-in')" style="margin-left: 20px">注册</el-button>
          </div>
          <div class="other-submit">
            <router-link to="/login-admin" class="sign-in-text">管理员登录</router-link>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      userForm: {
        accountNumber: '13011110001',
        userPassword: 'abc!@#678'
      }
    };
  },

  methods: {
    login() {
      this.$api.userLogin({
        accountNumber: this.userForm.accountNumber,
        userPassword: this.userForm.userPassword
      }).then(res => {
        console.log("after login...")
        console.log("login response" + res);
        console.log("Cookie" + document.cookie);
        if (res.status_code === 1) {
          res.data.signInTime=res.data.signInTime.substring(0,10);
          this.$globalData.userInfo = res.data;
          this.$router.replace({path: '/index'});
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    toIndex() {
      this.$router.replace({path: '/index'});
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  /* 溢出隐藏 */
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}

.login-body {
  padding: 30px;
  width: 300px;
  height: 100%;
  /* 溢出隐藏 */
  overflow-x: hidden;
  /* 渐变方向从左到右 */
  background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}

.login-title {
  padding-bottom: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  color: #409EFF;
  cursor: pointer;
}

.login-input {
  margin-bottom: 20px;
}

.login-submit {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.sign-in-container {
  padding: 0 10px;
}

.sign-in-text {
  color: #409EFF;
  font-size: 16px;
  text-decoration: none;
  line-height:28px;
}
.other-submit{
  display:flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-left: 200px;
}
</style>